<template>
  <div style="margin-top: 20px">
    <j-space>
      <div style="margin-right: 20px">销售排名
        <TinyTooltip content="只统计销售金额（包含优惠,不包含退货、换货）">
          <IconHelpSolid  />
        </TinyTooltip>
      </div>
      <div>
        <JTab v-model="tabIndex" :list="ph" @change="getList"></JTab>
      </div>
    </j-space>
  </div>
  <div style="margin-top: 10px">
    <item :list="aslist" />
  </div>
  <j-grid ref="bottomRef" :columns="fields" v-model="list" />
</template>
<script>
import tabswitch from "@/views/home/tabswitch.vue";
import { IconHelpSolid } from "@opentiny/vue-icon";
import item from "@/views/home/item.vue";
import tool from "@/utils/tool";

export default {
  components: {
    tabswitch,
    IconHelpSolid:IconHelpSolid(),
    item,
  },
  props: {
    range: '',
    tabType: ''
  },
  data() {
    return {
      tabIndex: '5',
      ph:[
        {id:'5',name: '前5'},
        {id:'10',name: '前10'},
        {id:'20',name: '前20'},
        {id:'40',name: '前40'},
        {id:'50',name: '前50'},
        {id:'100',name: '前100'},
        {id:'150',name: '前150'},
        {id:'200',name: '前200'},
      ],
      aslist: [],
      fields: [
        {type: 'index', width: 40},
        {field: 'buName', title: '终端名称', width: 280,align: 'left'},
        {field: 'linkName', title: '联系人', width: 150,align: 'left'},
        {field: 'address', title: '地址', width: 220,align: 'left'},
        {field: 'totalAmount', title: '销售总金额', width: 150,sum: true,align: 'right'},
        {field: 'ratio', title: '占比(%)', width: 150,sum: true,align: 'right'},
      ],
      list: []
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList () {
      let model = {
        ph: this.tabIndex,
        range: this.range,
        tabType: this.tabType
      }
      tool.post('home/bottom',model).then(ret => {
        if(ret.stat) {
          if(ret.data && ret.data.tj)
            this.aslist = ret.data.tj
          if(ret.data && ret.data.list)
          {
             this.list = ret.data.list
          }
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">

</style>